<template>
  <w-log :remove-url="removeUrl" :list-url="listUrl" :options="searchOptions">
    <template v-slot="scope" class="cell">
      <a-row :gutter="16">
        <a-col span="10">默认标识: {{ scope.item.defaultTag }}</a-col>
        <a-col span="7">用户名: {{ scope.item.userName }}</a-col>
        <a-col span="7">时间: {{ scope.item.date | DateFormat }}</a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col span="10" class="w-text-warp">URL: {{ scope.item.url }}</a-col>
        <a-col span="2">请求方式: {{ scope.item.reqType }}</a-col>
        <a-col span="10" class="w-text-warp">参数: {{ scope.item.params }}</a-col>
        <a-col span="2">是否成功: {{ scope.item.success }}</a-col>
      </a-row>
      <div>平台: {{ scope.item.userAgent }}</div>
    </template>
  </w-log>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import WLog from '@/components/admin/logs'
import { Admin } from '@/config/api'

@Component({
  name: 'AdminLogsWebAjax',
  layout: 'admin',
  components: {
    WLog
  },
  head () {
    return {
      title: '日志-前端-Ajax'
    }
  }
})
export default class AdminWebPackageAdd extends Vue {
  listUrl = Admin.logs.web.ajaxList
  removeUrl = Admin.logs.web.ajaxDelete
  searchOptions = [
    {
      title: '用户名',
      key: 'userName'
    },
    {
      title: '默认标记',
      key: 'defaultTag'
    },
    {
      title: '请求参数',
      key: 'params'
    },
    {
      title: '请求地址',
      key: 'url'
    },
    {
      title: '请求类型',
      key: 'reqType'
    },
    {
      title: '是否成功',
      key: 'success'
    },
    {
      title: '路由Query',
      key: 'routerQuery'
    },
    {
      title: '设备型号',
      key: 'userAgent'
    }
  ]
}
</script>

<style scoped></style>
